<template>
  <div class="register">
    <p class="title">云公社</p>
    <p class="tip1">为使得任务顺利进行，请先验证哦～</p>
    <div class="phone">
      <img src="@/assets/images/account.png" alt="">
      <input type="tel" placeholder="请输入手机号码" v-model="form.mobile">
    </div>
    <div class="password">
      <img src="@/assets/images/verify.png" alt="">
      <input type="tel" placeholder="请输入验证码" v-model="form.code">
      <span v-show="show" @click="getCode">获取验证码</span>
      <span v-show="!show" @click="getCode">{{count}}s重新获取</span>
    </div>
    <div class="btn">
      <input type="button" value="确定" @click="onsubmit">
    </div>
    <p class="tip2" v-html="info"></p>
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/22 14:37.
     */
    import { Indicator } from 'mint-ui';
    import utils from '../lib/StringExtend'
    export default {
        mounted() {
          if(utils.isNone(utils.getCookie('wechat_id_'+this.wechatId)) || utils.isNone(utils.getCookie('open_id_'+this.wechatId))) {
            this.getWechat();
          }
          if(!utils.isNone(this.code)&&!utils.isNone(this.appid)) {
            this.userInfo();
          }else {
            this.loadData();
          }
        },
        components: {},
        props: {},
        data() {
            return {
              form:{
                code:'',
                mobile:''
              },
              info:'',
              show: true,
              count: '',
              timer: null,
              appid: utils.GetQueryString('appid'),
              code: utils.GetQueryString('code'),
              wechatId:utils.getCookie('wechat_id'),
              wechat_id:this.$route.query.wechat_id,//公众号
            }
        },
        computed: {},
        methods: {
          //微信授权
          getWechat(){
            if(utils.isNone(this.wechat_id)){
              return;
            }
            let params = {
              redirect_url: window.location.href,
              wechat_id: this.wechat_id
            };
            utils.setCookie('wechat_id', this.$route.query.wechat_id);
            utils.setCookie('wechat_id_'+this.wechat_id, this.wechat_id);
            this.$axios.wechatWechatOauth(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              let url = res.data.url;
              window.location.href = url;
            })
          },
          //获取用户信息
          userInfo(){
            let params = {
              appid: this.appid,
              code: this.code,
            };
            this.$axios.wechatGetWechatUser(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              utils.setCookie('open_id_'+this.wechatId, res.data[0].open_id);
              this.loadData();
            })
          },

          loadData(){
            this.$axios.userConfig().then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              this.info = res.data.info;
            })
          },
          //提交绑定手机
          onsubmit(){
            if(this.form.mobile ===''){
              this.$toast('请输入手机号码');
              return false;
            }
            if(this.form.code ===''){
              this.$toast('请输入验证码');
              return false;
            }
            Indicator.open('加载中...');
            let params = Object.assign(this.form, {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            });
            this.$axios.userBindMobile(params).then(res=>{
              Indicator.close();
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
              }
              if(res.errcode === '000'){
                this.$toast(res.errmsg);
                this.$router.go(-1);
              }
            })
          },
          //发送验证码
          sendCode(){
            let params = {
              mobile:this.form.mobile,
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            Indicator.open('加载中...');
            this.$axios.userSendVerifyCode(params).then(res=>{
              Indicator.close();
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              this.$toast(res.errmsg)
            })
          },
          getCode(){
            if(this.form.mobile ===''){
              this.$toast('请输入手机号码');
              return false;
            }
            if (!(/^1[345678]\d{9}$/.test(this.form.mobile))) {
              this.$toast('手机号码格式错误');
              return false;
            }
            if(this.timer === null){
              this.sendCode();
            }
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000)
            }
          },
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
   .register{
      padding: 0 0.28rem 0 0.26rem;
      box-sizing: border-box;
      overflow: hidden;
     .title{
       color: #333333;
       font-size: 0.48rem;
       margin-top: 0.88rem;
       margin-bottom: 0.25rem;
       font-weight: 700;
       padding-left: 0.38rem;
       box-sizing: border-box;
       letter-spacing:0.08rem;
     }
     .tip1{
       color: #999999;
       font-size: 0.3rem;
       margin-bottom: 0.82rem;
       padding-left: 0.38rem;
       box-sizing: border-box;
       letter-spacing:0.06rem;
     }
     .phone{
       width:6.96rem;
       height:.80rem;
       background:rgba(248,248,248,1);
       border-radius:.40rem;
       margin-bottom: 0.47rem;
       display: flex;
       flex-direction: row;
       align-items: center;
       img{
         width: 0.33rem;
         height: 0.36rem;
         margin:0 0.3rem 0 0.4rem;
       }
       input{
         width: 5.6rem;
         border: 0;
         background: none;
         color: #999999;
         font-size: 0.3rem;
         height: 0.35rem;
         line-height: 0.38rem;
         margin: 0.225rem 0;
       }
       input::placeholder{
         color: #999999;
       }
     }
     .password{
       width:6.96rem;
       height:.80rem;
       background:rgba(248,248,248,1);
       border-radius:.40rem;
       margin-bottom: 0.61rem;
       display: flex;
       flex-direction: row;
       align-items: center;
       img{
         width: 0.32rem;
         height: 0.38rem;
         margin:0 0.3rem 0 0.4rem;
       }
       input{
         width: 4rem;
         border: 0;
         background: none;
         color: #999999;
         font-size: 0.3rem;
         height: 0.35rem;
         line-height: 0.38rem;
         margin: 0.225rem 0;
       }
       input::placeholder{
         color: #999999;
       }
       span{
         color: #FDB405;
         font-size: 0.3rem;
       }
     }
     .btn{
       margin-bottom: 0.51rem;
       input{
         width:6.96rem;
         height:0.8rem;
         background:linear-gradient(45deg,rgba(253,180,5,1),rgba(253,204,74,1));
         border-radius:0.4rem;
         border: 0;
         color: white;
         font-size: 0.3rem;
       }

     }
     .tip2{
       color: #999999;
       font-size: 0.24rem;
       text-align: left;
       line-height:0.36rem;
       letter-spacing:0.02rem;
     }
   }
</style>
